import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Button,
  Menu,
  Modal,
  message,
  Divider,
  Popconfirm,
  Select,
  InputNumber,
  Radio,
  Badge,
} from 'antd';
import TableList from '@/components/TableList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import moment from 'moment';
import { ruleP,nameMaxLength, nameMinLength,remarkMaxLength } from '@/utils/rule'
import styles from '../search.less';
const { TextArea } = Input;
const FormItem = Form.Item;
const { Option } = Select;

const formLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 19 },
};
const viewLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');
const CreateForm = Form.create()(props => {
  const {
    modalVisible,
    form,
    addDataFn,
    updateFn,
    handleModalVisible,
    text,
    keyRuleList,
    appList,
    selectKeyRuleList,
    sceneList,
    sceneList2,
    queryScene,
    form: { getFieldValue },
  } = props;

  const sceneMinLength = (rule, val, callback) => {
    if (!val) {
      callback();
    }
    if (val > getFieldValue('maxLength') || (val > getFieldValue('maxLength') && val > 9999)) {
      callback('应小于最大长度');
    }
    if (val < getFieldValue('maxLength') && (val < 1 || val > 9999)) {
      callback('长度范围为1-9999');
    }
    callback();
  };

  const sceneMaxLength = (rule, val, callback) => {
    if (!val) {
      callback();
    }
    if (val < getFieldValue('minLength') || (val < getFieldValue('minLength') && val < 0)) {
      callback('应大于最小长度');
    }
    if (val > getFieldValue('minLength') && (val < 1 || val > 9999)) {
      callback('长度范围为1-9999');
    }

    callback();
  };


  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();

      if (text) {
        updateFn(fieldsValue, text)
      } else {
        addDataFn(fieldsValue);
      }
    });
  };
  return (
    <Modal
      destroyOnClose
      width={640}
      title={text ? '编辑密钥' : '新增密钥'}
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
      maskClosable={false}
    >   

    <FormItem {...formLayout} label="密钥编码">
        {form.getFieldDecorator('keySceneCode', {
          rules: [
            { required: true, whitespace: true, message: '密钥编码不能为空' },  
            {pattern:new RegExp(ruleP(13)[0],'g'), message:ruleP(13)[1]},  
          ],
          initialValue: (text && text.keySceneCode) || '',
        })(<Input placeholder="请输入" />)}
      </FormItem>

      <FormItem {...formLayout} label="密钥名称">
        {form.getFieldDecorator('registerKeyName', {
          rules: [
            { required: true, whitespace: true, message: '密钥名称不能为空' }, 
            { min: nameMinLength()[0], message: nameMinLength()[1] },
            { max: nameMaxLength()[0], message: nameMaxLength()[1] },            
          ], initialValue: text && text.registerKeyName || ''
        })(<Input placeholder="请输入" />)}
      </FormItem>       
      <FormItem {...formLayout} label="应用系统">
        {form.getFieldDecorator('appId', {
          rules: [{ required: true, message: '应用系统不能为空' },], initialValue: text && text.appId
        })(<Select placeholder="请选择" showSearch style={{ width: '100%' }}>
          {appList &&
            appList.length &&
            appList.map(v => {
              return (
                <Option value={v.appId} key={v.appId}>
                  {v.appName}
                </Option>
              );
            })}
        </Select>
        )}
      </FormItem>
        
      <FormItem {...formLayout} label="算法">
        {form.getFieldDecorator('algorithm', {
          rules: [{ required: true}], 
          initialValue: text && text.algorithm || 'sm4'
        })(
          <Radio.Group onChange={(e) => { selectKeyRuleList(e.target.value);form.resetFields(['keyRuleId']) }}>
            <Radio value="sm4">SM4</Radio>
            <Radio value="aes">AES</Radio>
            <Radio value="des3">DES3</Radio>
            {/* <Radio value="rsa">RSA</Radio>
            <Radio value="sm2">SM2</Radio> */}
          </Radio.Group>
        )}
      </FormItem>
        
      <FormItem {...formLayout} label="密钥规则">
        {form.getFieldDecorator('keyRuleId', {
          rules: [{ required: true, message: '密钥规则不能为空' },], initialValue: text && text.keyRuleId
        })(<Select placeholder="请选择" showSearch style={{ width: '100%' }}>
          {keyRuleList &&
            keyRuleList.length &&
            keyRuleList.map(v => {
              return (
                <Option value={v.keyRuleId} key={v.keyRuleId}>
                  {v.ruleName}
                </Option>
              );
            })}
        </Select>
        )}
      </FormItem>
         
      <FormItem {...formLayout} label="有效期">
        {form.getFieldDecorator('validdays', {
          rules: [{ required: true, message: '有效期不能为空' },], initialValue: text && text.validdays || '90'
        })(
          <InputNumber step={10} min={1} max={3650} />
        )}
        <span className="ant-form-text">&nbsp;天&nbsp;&nbsp;<span style={{color:'#999'}}>数值范围：1-3650</span></span>
      </FormItem>

    <FormItem {...formLayout} label="是否默认">
        {form.getFieldDecorator('defaultLabel', {initialValue: text && text.defaultLabel || 0
        })(
        <Radio.Group>
          <Radio value={1}>是</Radio> 
          <Radio value={0}>否</Radio>                     
        </Radio.Group>
          )}
      </FormItem>    
        
      <FormItem {...formLayout} label="适用场景">
        {form.getFieldDecorator('sceneId', {initialValue: text && text.sceneId
        })(<Select placeholder="请选择" showSearch style={{ width: '100%' }} onChange={(value) => { queryScene(value) }}>
          {sceneList &&
            sceneList.length &&
            sceneList.map(v => {
              return (
                <Option value={v.sceneId} key={v.sceneId}>
                  {v.sceneName}
                </Option>
              );
            })}
        </Select>
        )}
      </FormItem> 

      <FormItem {...formLayout} style={{display:'none'}}>
        {form.getFieldDecorator('sceneName', {
          initialValue: sceneList2 &&sceneList2.length && sceneList2[0].sceneName ,
        })(<Input />)}
      </FormItem>     
      <FormItem {...formLayout} style={{display:'none'}}>
        {form.getFieldDecorator('sceneCode', {
          initialValue: sceneList2 &&sceneList2.length && sceneList2[0].sceneCode ,
        })(<Input />)}
      </FormItem>    

      <Form layout="inline">
        <FormItem labelCol={{ span: 11 }} wrapperCol={{ span: 12 }} label="敏感数据长度">
        {form.getFieldDecorator('minLength', {
                rules: [                 
                  { validator: sceneMinLength },                 
                ],
                initialValue: (sceneList2 &&sceneList2.length && sceneList2[0].minLength) || '',
              })(<InputNumber min={0} max={9999} style={{ width: 120 }} placeholder="0-9999" />)}
            </FormItem>
            <FormItem style={{ width: '20px', textAlign: 'right' }}>-</FormItem>
            <FormItem>
              {form.getFieldDecorator('maxLength', {
                rules: [                 
                  { validator: sceneMaxLength },                 
                ],
                initialValue: (sceneList2 &&sceneList2.length && sceneList2[0].maxLength) || '',
              })(<InputNumber min={1} max={9999} style={{ width: 120 }} placeholder="1-9999" />)}
            </FormItem>
      </Form>

      <FormItem {...formLayout} label="正则表达式" style={{marginTop:8}}>
        {form.getFieldDecorator('regularExpression', {          
          initialValue: sceneList2 &&sceneList2.length? sceneList2[0].regularExpression:'' ,
        })(<TextArea placeholder="请输入"/>)}
      </FormItem>  

  {getFieldValue('defaultLabel') == 1?null:(
    <Fragment>
      <FormItem {...formLayout} label="模糊搜索">
        {form.getFieldDecorator('ifSearch', {initialValue: sceneList2&&sceneList2.length ? sceneList2[0].ifSearch : 1
        })(
        <Radio.Group>
          <Radio value={1}>支持</Radio> 
          <Radio value={0}>不支持</Radio>                     
        </Radio.Group>
          )}
      </FormItem>    

      {getFieldValue('ifSearch') == 1?null:
      (<FormItem {...formLayout} label="更新密钥">
        {form.getFieldDecorator('ifUpdateKey', {initialValue: sceneList2&&sceneList2.length && sceneList2[0].ifUpdateKey
        })(
        <Radio.Group>
          <Radio value={1}>支持</Radio> 
          <Radio value={0}>不支持</Radio>                     
        </Radio.Group>
          )}
      </FormItem>) }
    </Fragment>
  )}
      
    </Modal>
  );
});

/* eslint react/no-multi-comp:0 */
@connect(({ keyMngt, loading }) => ({
  keyMngt,
  // loading: loading.models.keyMngt,
  loading:loading.effects['keyMngt/queryList']
}))


@Form.create()
class keyMngt extends PureComponent {
  state = {
    modalVisible: false,
    updateModalVisible: false,
    formValues: {},
    selectedRows: [],
    text: {},
    keyRuleList: [],
    appList: [],
    sceneList: [],
    sceneList2: [],    
  };

  columns = [
    // {
    //   title: '序号',
    //   render: (text, record, index) => (
    //     index+1
    //   ),
    // },
    {
      title: '密钥名称',
      dataIndex: 'registerKeyName',
    },
    {
      title: '密钥编码',
      dataIndex: 'keySceneCode',
    },
    {
      title: '版本号',
      dataIndex: 'currentVersion',
    },
    {
      title: '应用系统',
      dataIndex: 'appName',
    },
    {
      title: '密钥规则',
      dataIndex: 'ruleName',
    },
    {
      title: '算法',
      dataIndex: 'algorithm',
    },    
    {
      title: '有效期',
      render: (text) => (
        <Fragment>
          {moment(text.effectiveTime).format('YYYY-MM-DD HH:mm:ss')} ~ {moment(text.failureTime).format('YYYY-MM-DD HH:mm:ss')}
        </Fragment>
      )
    },
    {
      title: '是否默认',
      dataIndex: 'defaultLabel',
      render: (text) => (
        <Fragment>
          {text == 1 ? <Badge status="success" text="是" />:<Badge status="error" text="否" />}
        </Fragment>
      )
    },
    {
      title: '操作',
      width: 200,
      render: (text, props) => (
        <Fragment>
          {/* <a onClick={() => this.handleModalVisible(true,text)}>编辑</a>
          <Divider type="vertical" /> */}
          <a onClick={() => this.handleDetailModalVisible(true, text)}>详情</a>
          {/* <Divider type="vertical" />
          <a onClick={() => this.deleteData(text.registerKeyId)}>删除</a> */}
          {text.ifUpdateKey == 1? (
            <Fragment>
          <Divider type="vertical" />
          <a onClick={() => this.updateKey(text.registerKeyId)}>更新密钥</a>
            </Fragment>
          ):null}
          
          <Divider type="vertical" />
          <ViewHistoryKeys
            {...{ registerKeyId: props.registerKeyId, text, }}
          >
            <a>历史密钥</a>
          </ViewHistoryKeys>
        </Fragment>
      ),
    },
  ];

  deleteData = (id) => {
    Modal.confirm({
      title: '删除',
      content: '一旦删除，将造成sdk不可用，请确认无误后删除。',
      okText: '确认',
      cancelText: '取消',
      onOk: () => this.handleDeleteData(id),
    });
  };

  batchDelete = (rows = []) => {
    const ids = rows.map((item) => {
      return item.registerKeyId;
    }).join(",");
    this.deleteData(ids); //批量删除
  };


  // 删除方法
  handleDeleteData(id) {
    const { dispatch } = this.props;
    const values = {
      registerKeyId: id,
    };
    dispatch({
      type: 'keyMngt/remove',
      payload: values,
      callback: (res) => {
        if (res.result == "ok") {
          Modal.success({ title: res.msg });
          this.pageList();
          this.setState({ selectedRows: [] })
        } else {
          Modal.error({ title: '操作失败', content: res.msg });
        }
      },
    });
  }

  //更新密钥  
  updateKey = (id) => {
    Modal.confirm({
      title: '更新密钥',
      content: '您确定要更新密钥吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => this.handleUpdateKey(id),
    });
  };

  // 更新密钥
  handleUpdateKey(id) {
    const { dispatch } = this.props;
    const values = {
      registerKeyId: id,
    };
    dispatch({
      type: 'keyMngt/updateKey',
      payload: values,
      callback: (res) => {
        if (res.result == "ok") {
          Modal.success({ title: res.msg });
          this.pageList();
        } else {
          Modal.error({ title: '操作失败', content: res.msg });
        }
      },
    });
  }

  // 分页查询列表
  pageList(data, pageSize = 10, pageNum = 0) {
    const { dispatch } = this.props;
    const values = {
      registerKeyName: data && data.registerKeyName,
      algorithm: data && data.algorithm,
      pageSize: pageSize, //分页每页条数
      pageNum: pageNum, //分页页码
    };
    dispatch({
      type: 'keyMngt/queryList',
      payload: values,
    });
  }

  // 查询密钥规则列表
  selectKeyRuleList = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'keyMngt/selectKeyRule',
      payload: { algorithm: e },
      callback: res => {
        this.setState({
          keyRuleList: res.data.dataList, 
        });
      },
    });
    
  }

  // 查询应用系统列表
  selectAppList() {
    const { dispatch } = this.props;
    dispatch({
      type: 'keyMngt/selectAppList',
      callback: res => {
        this.setState({
          appList: res.data.dataList,
        });
      },
    });
  }

    // 查询场景列表
    selectSceneList = () => {
      const { dispatch } = this.props;
      dispatch({
        type: 'keyMngt/selectSceneList',       
        callback: res => {
          this.setState({
            sceneList: res.data.dataList,
          });
        },
      });
    }

  // 根据选择的场景查询相关字段信息
  queryScene = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'keyMngt/selectSceneList',
      payload: { sceneId: e },
      callback: res => {
        this.setState({
          sceneList2: res.data.dataList,
        });
      },
    });
  }

  componentDidMount() {
    this.pageList();
    this.selectKeyRuleList('sm4');
    this.selectAppList();
    this.selectSceneList();
  }

  handleSelectRows = rows => {
    this.setState({
      selectedRows: rows,
    });
  };

  handleSearch = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.setState({
        formValues: fieldsValue,
      })
      //点击查询  
      this.pageList(fieldsValue);
    });
  };

  // 详情
  handleDetailModalVisible = (flag, text) => {
    this.setState({
      detailModalVisible: !!flag,
      detailsData: text,
    });
  };

  // 新增弹框的显示和隐藏
  handleModalVisible = (flag, text) => {
    this.setState({
      modalVisible: !!flag,
      text: text,
      sceneList2:[],
    });
  };

  // 更新接口
  updateFn = (fields, text) => {
    const { dispatch } = this.props;
    const params = {
      registerKeyId: text.registerKeyId,
      keySceneCode:fields.keySceneCode,
      registerKeyName: fields.registerKeyName,
      algorithm: fields.algorithm,
      appId: fields.appId,
      keyRuleId: fields.keyRuleId,
      validdays: fields.validdays,
      sceneName: fields.sceneName, 
      maxLength: fields.maxLength,
      minLength: fields.minLength,
      sceneCode: fields.sceneCode,
      defaultLabel:fields.defaultLabel,
      regularExpression: fields.regularExpression,
      ifSearch: fields.ifSearch,
      ifUpdateKey: fields.ifUpdateKey,
    }
    dispatch({
      type: 'keyMngt/update',
      payload: params,
      callback: (res) => {
        if (res.result == "ok") {
          Modal.success({ title: res.msg });
          this.pageList();
        } else {
          Modal.error({ title: '操作失败', content: res.msg });
        }
      },
    });
    this.handleModalVisible();
  };

  // 增加接口
  addDataFn = (fields) => {
    const { dispatch } = this.props;
    const params = {
      registerKeyName: fields.registerKeyName,
      algorithm: fields.algorithm,
      appId: fields.appId,
      keyRuleId: fields.keyRuleId,
      keySceneCode:fields.keySceneCode,
      validdays: fields.validdays,     
      sceneName: fields.sceneName, 
      sceneCode: fields.sceneCode,
      maxLength: fields.maxLength,
      minLength: fields.minLength,
      defaultLabel:fields.defaultLabel,
      regularExpression: fields.regularExpression,
      ifSearch: fields.defaultLabel==1?0:fields.ifSearch,
      ifUpdateKey: (fields.defaultLabel==1 || fields.ifSearch ==1) ? 0:fields.ifUpdateKey,
    }
    dispatch({
      type: 'keyMngt/add',
      payload: params,
      callback: (res) => {
        if (res.result == "ok") {
          Modal.success({ title: res.msg });
          this.pageList();
        } else {
          Modal.error({ title: '操作失败', content: res.msg });
        }
      },
    });
    this.handleModalVisible();
  };

  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
  }; //重置

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="密钥名称">
              {getFieldDecorator('registerKeyName')(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>

          <Col md={8} sm={24}>
            <FormItem label="算法">
              {getFieldDecorator('algorithm')(
                <Select placeholder="请选择">
                  <Option value="">全部</Option>
                  <Option value="sm4">SM4</Option>
                  <Option value="aes">AES</Option>
                  <Option value="des3">DES3</Option>
                  {/* <Option value="rsa">RSA</Option>
                  <Option value="sm2">SM2</Option> */}
                </Select>
              )}
            </FormItem>
          </Col>

          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    return this.renderSimpleForm();
  }

  handleStandardTableChange(pagination, filters, sorter) {
    const { formValues } = this.state;
    // 分页请求
    this.pageList(formValues, pagination.pageSize, pagination.current - 1);
  }

  render() {
    const {
      keyMngt: { data },
      loading,
    } = this.props;
    const { selectedRows, modalVisible, updateModalVisible, text, detailModalVisible, detailsData, keyRuleList, appList,sceneList,sceneList2} = this.state;
    const parentMethods = {
      handleModalVisible: this.handleModalVisible,
      addDataFn: this.addDataFn,
      updateFn: this.updateFn
    };
    const detailsMethods = {
      handleDetailModalVisible: this.handleDetailModalVisible,
    };
    return (
      <PageHeaderWrapper title="应用系统管理">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>{this.renderForm()}</div>
            <div className={styles.tableListOperator}>
              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
                新增
              </Button>
              {selectedRows.length > 0 && (
                <span>
                  <Button onClick={() => this.batchDelete(selectedRows)}>批量删除</Button>
                </span>
              )}
            </div>
            <TableList
              className={styles.tdPadding}
              selectedRows={selectedRows}
              loading={loading}
              data={data}
              columns={this.columns}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange.bind(this)}
              rowKey={record => record.registerKeyId}
              hideRowSelection
            />
          </div>
        </Card>
        <CreateForm {...parentMethods} 
        modalVisible={modalVisible} 
        text={text} 
        keyRuleList={keyRuleList} 
        appList={appList} 
        selectKeyRuleList={this.selectKeyRuleList}
        queryScene={this.queryScene}
        sceneList={sceneList}
        sceneList2={sceneList2}
         />
        {detailModalVisible ? (
          <Details {...detailsMethods} detailModalVisible={detailModalVisible} detailsData={detailsData} />
        ) : null}
      </PageHeaderWrapper>
    );
  }
}

//查看详情弹窗
@connect(
  state => ({
    historyData: state.keyMngt.historyData,
    loadingqueryHistoryList: state.loading.effects['keyMngt/queryHistoryList'],
  }),
  dispatch => ({
    queryHistoryList: e => dispatch({ type: 'keyMngt/queryHistoryList', payload: e }),
    saveHistoryData: e => dispatch({ type: 'keyMngt/saveHistoryData', payload: e }),
  })
)
class ViewHistoryShell extends PureComponent {
  state = {
    selectedRows: [],
  };
  colColumns = [
    {
      title: '版本号',
      dataIndex: 'keyVersion',
    },
    // {
    //   title: '算法',
    //   dataIndex: 'algorithm',
    // },
    {
      title: '生效时间',
      dataIndex: 'effectiveTime',
      render: (text) => (
        <Fragment>
          {moment(text).format('YYYY-MM-DD HH:mm:ss')}
        </Fragment>
      )
    },
    {
      title: '失效时间',
      dataIndex: 'failureTime',
      render: (text) => (
        <Fragment>
          {moment(text).format('YYYY-MM-DD HH:mm:ss')}
        </Fragment>
      )
    },
  ];

  // 历史密钥查询列表
  pageHistoryList = (res = {}, pageSize = 10, pageNum = 0) => {
    const values = {
      registerKeyId: this.props.text.registerKeyId,
      pageSize: pageSize,
      pageNum: pageNum,
    };
    this.props.queryHistoryList(values);
  };
  componentDidMount() {
    this.pageHistoryList();
  }
  componentWillUnmount() {
    this.props.saveHistoryData({
      dataList: [],
      pageNum: 0,
      pageSize: 0,
      totalCount: 0,
    });
  }

  handleStandardColumnChange(pagination, filters, sorter) {
    const { formValues } = this.state;
    // 分页请求
    this.pageColsList(formValues, pagination.pageSize, pagination.current - 1);
  }
  render() {
    const { historyData } = this.props;
    return (
      <TableList
        bordered
        className={styles.tdPadding}
        selectedRows={this.state.selectedRows}
        loading={this.props.loadingqueryHistoryList}
        data={historyData}
        columns={this.colColumns}
        onChange={this.handleStandardColumnChange.bind(this)}
        rowKey={record => record.id}
        hideRowSelection
      />
    );
  }
}

class ViewHistoryKeys extends PureComponent {
  constructor(props) {
    super(props);
  }
  state = {
    viewHistoryModalVisible: false,
  };
  handleViewHistoryModalVisible = flag => {
    this.setState({
      viewHistoryModalVisible: !!flag,
    });
  };

  render() {
    const { text } = this.props;
    return (
      <>
        <Modal
          destroyOnClose
          width={800}
          title="查看历史密钥"
          visible={this.state.viewHistoryModalVisible}
          onCancel={() => this.handleViewHistoryModalVisible(false)}
          footer={[
            <Button key="back" type="primary" onClick={() => this.handleViewHistoryModalVisible()}>
              返回
            </Button>,
          ]}
        >
          <div style={{ marginBottom: 16 }}>密钥名称：{this.props.text.registerKeyName}</div>
          <ViewHistoryShell {...this.props} />
        </Modal>
        <span onClick={() => this.handleViewHistoryModalVisible(true)}>{this.props.children}</span>
      </>
    );
  }
}

//查看详情弹窗
class Details extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const { detailModalVisible, handleDetailModalVisible, detailsData } = this.props;
    return (
      <Modal
        destroyOnClose
        width={800}
        title="查看详情"
        visible={detailModalVisible}
        onCancel={() => handleDetailModalVisible(false)}
        footer={[
          <Button key="back" type="primary" onClick={() => handleDetailModalVisible()}>返回</Button>
        ]}
        className={styles.viewMore}
      >
        <Row>
          <Col md={12}>
            <FormItem {...viewLayout} label="密钥名称">
              {detailsData.registerKeyName}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...viewLayout} label="版本号">
              {detailsData.currentVersion}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...viewLayout} label="算法">
              {detailsData.algorithm}
            </FormItem>
          </Col>
          <Col md={12}>
            <FormItem {...viewLayout} label="密码规则">
              {detailsData.ruleName}
            </FormItem>
          </Col>
          <Col md={12}>
            <FormItem {...viewLayout} label="应用系统">
              {detailsData.appName}
            </FormItem>
          </Col>
          <Col md={12}>
            <FormItem {...viewLayout} label="有效期">
              {moment(detailsData.effectiveTime).format("YYYY-MM-DD HH:mm:ss")} ~  {moment(detailsData.failureTime).format("YYYY-MM-DD HH:mm:ss")}
            </FormItem>
          </Col>
          <Col md={12}>
            <FormItem {...viewLayout} label="适用场景">
              {detailsData.sceneName}
            </FormItem>
          </Col>
          <Col md={12}>
            <FormItem {...viewLayout} label="敏感数据长度">
              {detailsData.minLength} ~ {detailsData.maxLength}
            </FormItem>
          </Col>
          <Col md={12}>
            <FormItem {...viewLayout} label="模糊搜索">
              {detailsData.ifSearch ==1?'支持':'不支持'}
            </FormItem>
          </Col>  
         
          <Col md={12}>
            <FormItem {...viewLayout} label="更新密钥">
              {detailsData.ifUpdateKey ==1?'支持':'不支持'}
            </FormItem>
          </Col>  

          <Col md={24}>
            <FormItem labelCol={{span:3}} wrapperCol={{span:21}} label="正则表达式">
              {detailsData.regularExpression}
            </FormItem>
          </Col> 
        </Row>
      </Modal>
    );
  }
}

export default keyMngt;
